<template>
  <div id="app">
    <index-header :seller="seller"/>
    <div class="tab">
      <div class="tab-item border-1px">
        <router-link to="/goods" index=0 @click="titleClick(index)" :seller="seller">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <router-view :seller="seller"></router-view>
  </div>
</template>

<script>
  import IndexHeader from '@/components/header/Header'

  import axios from 'axios'

  export default {
    name: 'App',
    data() {
      return {
        seller: {}
      }
    },
    mounted() {
      this.txt()
    },
    components: {
      IndexHeader
    },
    methods: {
      txt() {
        axios.get('/api/data.json')
        .then(this.txt_json)
      },
      txt_json(res) {
        //console.log(res.data.seller)
        res = res.data
        this.seller= res.seller
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "./common/stylus/mixin.styl"

  .tab
    display: flex
    text-align: center
    height: 40px
    line-height: 40px
    border-1px(rgba(7, 17, 27, .1))
    .tab-item
      flex: 1
      & > a
        display: block
        color: rgb(77, 85, 93)
        font-size: 14px
        text-decoration: none
        &.active
          color: rgb(240, 20, 20)
</style>
